<script lang="ts" setup>
import { getTopNews } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'

const dayjs = useDayjs()
const list = ref<any[]>([])
const TJlist = ref<any[]>([])
const title = ref('头条资讯')
const routePath = [{ name: '首页', path: '/' }, { name: title }]
const timeNow = ref('')
const valuedate = ref('')
const total = ref(0)
const queryParams = reactive(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },
    condition: [],
    positions: '首页',
  },
)
const queryParams1 = reactive(
  {
    page: {
      rownumber: 3,
      pageNo: 1,
    },
    order: [{
      colName: 'release_time',
      orderType: 'desc', // asc升序 desc降序
    }],
    condition: [
      {
        colName: 'column_recommendation',
        ruleType: 'eq',
        value: '是',
      },

    ],
  },
)
const timeYS = ref('background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);color:#fff')
const timeNo = ref('background:none;color:#333;border:1px solid rgba(229,229,234,1);')
// 当前时间
const now = dayjs()
// 过去一周
const oneWeekAgo = now.subtract(7, 'day')
// 过去一月
const oneMonthAgo = now.subtract(1, 'month')
// 过去半年
const halfYearAgo = now.subtract(6, 'month') // 由于月份不是固定天数，这里减去3个月再加1个月以得到半年
// console.log(now.format('YYYY-MM-DD'))
// console.log(oneWeekAgo.format('YYYY-MM-DD'))
// console.log(oneMonthAgo.format('YYYY-MM-DD'))
// console.log(halfYearAgo.format('YYYY-MM-DD'))
function clickTime(item) {
  if (timeNow.value == item) {
    console.log(item)
    timeNow.value = ''
    console.log(timeNow)
    queryParams.condition = []
  }
  else {
    timeNow.value = item
    valuedate.value = ''
    queryParams.condition = []
    if (item == 1) {
      queryParams.condition.push({
        colName: 'create_time',
        ruleType: 'between',
        value: [oneWeekAgo.format('YYYY-MM-DD'), now.format('YYYY-MM-DD')],
      })
    }
    else if (item == 2) {
      queryParams.condition.push({
        colName: 'create_time',
        ruleType: 'between',
        value: [oneMonthAgo.format('YYYY-MM-DD'), now.format('YYYY-MM-DD')],
      })
    }
    else if (item == 3) {
      queryParams.condition.push({
        colName: 'create_time',
        ruleType: 'between',
        value: [halfYearAgo.format('YYYY-MM-DD'), now.format('YYYY-MM-DD')],
      })
    }
  }

  getData()
}
// 分页参数更改
function onPageChange(params: { pageNum: number, pageSize: number }) {
  queryParams.page.pageNo = params.pageNum
  queryParams.page.rownumber = params.pageSize
  getData()
}
function clickItem(item) {
  navigateTo({
    path: `/peopleHealth/topNewsDetail`,
    query: {
      id: item.id,
      // data: encode(res.data[0]),
    },
  })
  // getTopNews({
  //   condition: [{ colName: 'id', ruleType: 'eq', value: item.id }],
  // }).then((res) => {
  //   navigateTo({
  //     path: `/peopleHealth/topNewsDetail`,
  //     query: {
  //       id: encode(res.data[0].id),
  //       // data: encode(res.data[0]),
  //     },
  //   })
  // })
}
function getData() {
  getTopNews(queryParams).then((res) => {
    total.value = res.page.total
    list.value = []
    res.data.forEach((element) => {
      list.value.push({
        title: element.title_name,
        blurd: extractTextFromPTags(element.contents),
        info: element.origin,
        time: dayjs(element.release_time).format('YYYY-MM-DD'),
        url: element.cover_file_name,
        id: element.id,
      })
    })
    TJlist.value = res.data.slice(0, 3)
  }).catch(() => {
  })
}
function getTJData() {
  getTopNews(queryParams1).then((res) => {
    TJlist.value = res.data
  }).catch(() => {
  })
}
onMounted(() => {
  getData()
  getTJData()
})
function timeChange(time) {
  queryParams.condition = []
  console.log(time)
  if (time != null) {
    queryParams.condition.push({
      colName: 'create_time',
      ruleType: 'between',
      value: time,
    })
    getData()
  }
  else {
    queryParams.condition = []
    getData()
  }
}
function extractTextFromPTags(htmlString: string) {
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlString, 'text/html')
  const pTags = doc.getElementsByTagName('p')
  let text = ''
  for (let i = 0; i < pTags.length; i++) {
    text += pTags[i]?.textContent
  }
  return text
}
</script>

<template>
  <div class="px-40">
    <PublicSearch type="头条资讯" />
    <PublicSearchDialog type="头条资讯" />
    <div>
      <div class="bg-#fff">
        <CommonPageContainer :title="title" :path="routePath">
          <div class="mt-20px flex flex-wrap justify-between">
            <div class="w-full md:w-85%">
              <div class="flex">
                <div
                  class="cursor-pointer rounded-sm p-8px" :style="timeNow == 1 ? timeYS : timeNo"
                  @click="clickTime(1)"
                >
                  近一周
                </div>
                <div
                  class="mx-10px cursor-pointer rounded-sm p-8px"
                  :style="timeNow == 2 ? timeYS : timeNo" @click="clickTime(2)"
                >
                  近一月
                </div>
                <div
                  class="cursor-pointer rounded-sm p-8px" :style="timeNow == 3 ? timeYS : timeNo"
                  @click="clickTime(3)"
                >
                  近半年
                </div>
                <div class="ml-10px">
                  <el-date-picker
                    v-model="valuedate" style="height:100%" type="daterange"
                    format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="至"
                    start-placeholder="开始时间" end-placeholder="结束时间" size="large" @change="timeChange"
                  />
                </div>
              </div>
              <div class="">
                <PublicList :list="list" @click-item="clickItem" />
                <PublicPagination :total="total" @change="onPageChange" />
              </div>
            </div>
            <div class="w-full md:w-15%">
              <div>
                <div
                  class="h-40px flex items-center rounded-tl rounded-tr px-10px py-5px"
                  style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                >
                  <img src="/img/tj.png" alt="">
                  <div class="pl-15px" text="#fff 16px">
                    推荐
                  </div>
                </div>
                <div class="flex rounded-bl rounded-br px-10px py-5px md:flex-col" border="2px solid #50bc8d">
                  <div
                    v-for="item in TJlist" class="cursor-pointer" hover="text-#0E9472"
                    @click="clickItem(item)"
                  >
                    <img :src="item.cover_file_name" alt="">
                    <div class="py-10px" text="14px">
                      {{ item.title_name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CommonPageContainer>
      </div>
    </div>
  </div>
</template>

<style></style>
